<template>
    <div class="settings">
        <!-- <div class="title">Account</div> -->
        <div class="func-list">
            <div class="func-item" v-for="item in func_list" :key="item.id" @click="item.click">
                <div class="left-box">
                    <div class="icon" :style="`--icon: url(${ item.icon })`"></div>
                    <div class="text">{{ item.text }}</div>
                </div>
                <div class="right-box" v-show="item.has_right" :style="`color: ${ item.right_tc }`">{{ item.right_text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { routerTo } from '@/utils/jump';
import { user_auth_status } from '@/service/user';

const auth_status_map = {
    0: {
        text: 'Reviewing',
        color: 'var(--positive-number-color)',
    },
    1: {
        text: 'Verified',
        color: 'var(--positive-number-color)',
    },
    2: {
        text: 'Rejected',
        color: 'var(--negative-number-color)',
    },
    3: {
        text: 'Unverified',
        color: 'var(--negative-number-color)',
    }
};

const func_list = computed(() => {
    return [
        {
            id: 1,
            icon: '/icon/settings/personal-information.png',
            text: 'Verify Account',
            click: () => { routerTo('/user/personal_infomation') },
            has_right: true,
            right_text: auth_status_map[user_auth_status.value].text,
            right_tc: auth_status_map[user_auth_status.value].color,
        },
        {
            id: 2,
            icon: '/icon/settings/security-and-privacy.png',
            text: 'User Security',
            click: () => { routerTo('/user/security_and_privacy') },
            has_right: false,
            right_text: '',
            right_tc: '',
        },
        // {
        //     id: 2,
        //     icon: '/icon/settings/bank-accounts.png',
        //     text: 'Deposit & Withdraw',
        //     click: () => { routerTo('/deposit/list') },
        // },
        {
            id: 3,
            icon: '/icon/settings/agreements.png',
            text: 'Support Agreements',
            click: () => {},
            has_right: false,
            right_text: '',
            right_tc: '',
        },
        {
            id: 4,
            icon: '/icon/settings/help-and-support.png',
            text: 'About US',
            click: () => {},
            has_right: false,
            right_text: '',
            right_tc: '',
        }
    ];
});

</script>

<style scoped lang="less">
.settings {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .title {
        font-size: 3.5vw;
        font-weight: 700;
        color: var(--text-color);
    }

    .func-list {
        display: flex;
        flex-direction: column;
        gap: 2vw;

        .func-item {
            padding: 2vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .left-box {
                display: flex;
                align-items: center;
                gap: 2vw;

                .icon {
                    --size: 6vw;
                    width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                }

                .text {
                    font-size: 3vw;
                }
            }

            .right-box {
                font-size: 3vw;
                font-weight: 500;
            }
        }
    }
}
</style>